import Echarts from "@/components/Echarts";
import style from "./chart.module.scss";
import { useEffect, useState } from "react";
import { renderTagRankCount } from "../utils/renderTagRankCount";
import { queryArticleCountByTag } from "@/api/statistics";

export default function TagRankCount() {
  const [chartOptions, setChartOptions] = useState<Record<string, unknown>>();
  /**
   * 获取文章每月数量
   */
  const getCategoryRank = async () => {
    const res = await queryArticleCountByTag();
    if (res.code === 200) {
      const list = res.data || [];
      const xAxis = list.map((item) => item.name);
      const yAxis = list.map((item) => Number(item.count));
      setChartOptions(renderTagRankCount(xAxis, yAxis));
    }
  };
  useEffect(() => {
    getCategoryRank();
  }, []);
  return (
    <div className={style["block-chart__box"]}>
      <div className={`${style["block__wrap"]} float__block--g`}>
        <div className={style["block__title"]}>按标签统计文章数</div>
        <div className={style["block__box"]}>
          {chartOptions && <Echarts options={chartOptions} />}
        </div>
      </div>
    </div>
  );
}
